<template>
  <div class="app-container">
      <el-row v-show="itemshow">
        <el-col :span="24" style="height: 30px;">
          可视列
          <el-checkbox  v-model="checkboxAll" @change="handleCheckAllChange" style="margin-left:50px; ">全选/部分</el-checkbox>
        </el-col>
        <el-col :span="24" v-show="showSwitch">
          <div>
            <el-checkbox-group v-model="checkboxVal"  @change="handleSelectionChange">
              <el-checkbox class="col_check" v-for="(v,i) in formTheadOptions" :key="i" :label="v.field">{{v.title}}</el-checkbox>
            </el-checkbox-group>
          </div>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="24" class="list" >
          <!--<happy-scroll color="#ccc" size="5" class="default-scrollbar__wrap" left  resize scroll-top="190">-->
          <el-scrollbar class="default-scrollbar" wrap-class="default-scrollbar__wrap">
              <el-table size="mini" tooltip-effect="dark"  highlight-current-row  class="content"
                        :data="mtb.data" v-loading.body="listLoading"
                        @selection-change="handleSelectionChange"
                        @sort-change="sortChange"
                        @row-click="handRowClick"
              >
                <el-table-column type="selection" show-overflow-tooltip width="25"></el-table-column>

                <el-table-column v-for="(v,i) in mtb.columns" align="center" :key="i" :prop="v.field" :label="v.title"
                                 :align="v.align"  :sortable="v.sortable" >
                  <template slot-scope="scope">
                    <span v-if="v.field=='hasNum'" @dblclick="openDHPC(scope.row,scope.$index,true)" class="el-button el-button--text">{{scope.row[v.field]}}</span>
                    <span v-else-if="v.field=='spdt'" @dblclick="openSPDT(scope.row,scope.$index,true)" class="el-button el-button--text">{{scope.row[v.field]}}</span>
                    <span v-else>{{scope.row[v.field]}}</span>
                  </template>
                </el-table-column>
                <!--<el-table-column fixed="right" label="操作" width="100">-->
                <el-table-column label="操作" width="150" >
                  <template slot-scope="scope">
                    <button @click="handleEdit(scope.row)" class="el-tag el-tag--warning el-tag--mini"
                    style="cursor: pointer;">修改</button>
                    <button @click="handleDelete(scope.row)" class="el-tag el-tag--danger el-tag--mini"
                    style="cursor: pointer;">删除</button>
                  </template>

                </el-table-column>
              </el-table>
          </el-scrollbar>

          <!--</happy-scroll>-->

        </el-col>
        <el-col :span="24" style="min-height: 28px;">
          <!--<el-button size="mini"  type="primary" @click="multipleSelectSubmit" icon="el-icon-share">批量验收</el-button>-->
          <!--<el-button size="mini"  type="warning" @click="multipleSelectSubmit" >导出</el-button>-->
          <!--<el-button size="mini"  type="" @click="multipleSelectSubmit" >打印</el-button>-->
        </el-col>
      </el-row>

    <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.size"
                @pagination="getList"/>




    <!--到货批次-->
<!--    <el-dialog title="供货批次" :visible.sync="dialogDHPC">
      <el-table :data="gridData" fit highlight-current-row style="width: 100%;">
        <el-table-column prop="fact" label="供货单位" width="180"></el-table-column>
        <el-table-column prop="intime" label="入库时间" width="180"></el-table-column>
        <el-table-column prop="name" label="验收人" width="150"></el-table-column>
        <el-table-column prop="unit" label="计量单位" width="100"></el-table-column>
        <el-table-column prop="num" label="领用数量" width="100"></el-table-column>
        <el-table-column prop="status" label="出库状态" width="150"></el-table-column>
      </el-table>
    </el-dialog>-->
    <!--到货批次-->

<!--    <el-dialog title="详细流水" :visible.sync="dialogSPDT">
      <el-table :data="gridData" fit highlight-current-row style="width: 100%;">
        <el-table-column prop="fact" label="供货单位" width="180"></el-table-column>
        <el-table-column prop="intime" label="审批时间" width="180"></el-table-column>
        <el-table-column prop="name" label="验收人" width="150"></el-table-column>
        <el-table-column prop="unit" label="计量单位" width="100"></el-table-column>
        <el-table-column prop="num" label="审批数量" width="100"></el-table-column>
        <el-table-column prop="status" label="状态" width="150"></el-table-column>
      </el-table>
    </el-dialog>-->

  </div>
</template>

<script>
  import {disableBtn, ERRS, SUCS} from '@/utils'
  import {fetchGet, updateOne} from '@/api/common'
  import itemshow from '@/pages/mixin/itemshow'
  import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
  // import filter from './mixins/filters'
  //https://www.jianshu.com/p/79f39f2c1382
  //https://www.jianshu.com/p/33175c3a6ba4
  export default {
    name: 'stkAnyComp',
    components: {
      Pagination
    },

    mixins:[itemshow],
    data: function () {
      return {
        typeStatus:1,
        listLoading:false,
        //分页搜索
        total: 0,
        listQuery: {
          page: 1,
          size: 10, //limit条数
          searchText: '',
          partSourceType: '',
          partType: '',
          sort: {}
        },
        list: [],     //内容
        chartsData:{},  //chartsData
        dialogDHPC:false,
        dialogSPDT:false,
        showSwitch:true,
        count: 1,

        columns: [  //表头->字段
          {sortable:false,    width: 50 ,  field: "px", title: "序号", align:"center" },
          {sortable:false,    width: 150 , field: "fullCodeNo", title: "备件编码", align:"left" },
          {sortable:false,    width: 150 , field: "partName", title: "备件名称", align:"left" },
          {sortable:false,    width: 100 , field: "partType", title: "备件类型", align:"left" },
          {sortable:false,    width: 100 , field: "partSourceType", title: "备件属性", align:"left" },
          {sortable:false,    width: 100 , field: "spec", title: "规格型号", align:"left" },
          {sortable:false,    width: 50 , field: "unit", title: "单位", align:"left" },
          {sortable:'custom', width: 150 , field: "updatedTime", title: "申请日期" ,align:"left" },
        ],

        mtb: {
          data: [], //数据
          sel: null,//选中行
          columns: [],
        },

        multipleSelection:[],//多选项
        key: 1,// table key
        // formTheadOptions: ['apple', 'banana', 'orange'],
        formTheadOptions:[], // formTheadval: ["px", "category", "xhgg", "unit", "applyNum", "hasNum", "price", "money", "code", "dhpc", "line", "twos", "applyuse", "applytime", "sendman"], //选择值
        formTheadval: [], //选择值
        defaultFormThead: [], //默认选择值(全部)
        checkboxVal: [], // 当前多选选中 checkboxVal(默认全部)
        checkboxAll: true, //全选中?
        isIndeterminate: true,
        //部分显示列
        colexp:["px", "code", "category", "xhgg", "unit", "hasNum", "money", "atts", "types"],

      }
    },

    watch: {
      moreSelectShow(){
        console.log(123,this.moreSelectShow)
        return this.moreSelectShow
      },
      checkboxVal(valArr) {
        this.mtb.columns = this.columns.filter((i) => {
          //默认的+选择的
          // return valArr.concat(colexp).indexOf(i.field) >= 0
          return valArr.indexOf(i.field) >= 0
        })
        this.key = this.key + 1// 为了保证table 每次都会重渲 In order to ensure the table will be re-rendered each time
      }

    },
    mounted() {
      /*    document.oncontextmenu = function(){
            return false;
          }*/
      //取出列
      this.formTheadOptions = this.columns.filter((v) => {
        // if(this.colexp.indexOf(v.field) == -1)
        return {field: v.field, title: v.title}
      });
      // this.formTheadOptions=[ {field:v.field,title:v.title}];
      this.defaultFormThead = this.formTheadOptions.map(v => v.field);
      this.checkboxVal = this.defaultFormThead  //默认全选中值

      this.getList()
    },

    methods: {
      //搜索table数据
      getList(data) {
        console.log(data);
        var searchType=0
        if(data){
          this.listQuery.searchText=data.fullCodeNo
          searchType=1
        }
        this.total = 0;
        // this.listQuery.page = 1
        fetchGet(`sparepartscode/parts/condition/false?searchType=${searchType}&page=${this.listQuery.page}&size=${this.listQuery.size}&searchText=${this.listQuery.searchText}`).then(res => {
          if (res.code == 0) {
            let data = res.data;
            if (data.content.length > 0) {
              this.total = data.totalElements; //共多少页
              this.listQuery.page = data.page;
              this.mtb.data = data.content
              this.listAddPx();
            } else {
              this.mtb.data = []
            }
          } else {
            ERRS(res.message)
          }
        })

      },

      //add table px
      listAddPx() {
        let insIndex = this.listQuery.size * (this.listQuery.page - 1);
        this.mtb.data = this.mtb.data.map((v, index) => {
          this.$set(v, 'px', insIndex + index + 1);
          this.$set(v, 'fullCodeNo', v.codeExplain.fullCodeNo);
          return v
        });
        console.log(this.mtb.data)
      },
      //
      handRowClick(row){
        console.log(row)
        console.log(row.codeExplain.parent._id)
        // this.tableRowClassName(row)
        this.$emit('setCheckedKey',row.codeExplain.parent._id)
      },
      //排序
      sortChange(data) {
        console.log(data);
        const { prop, order } = data
        this.listQuery.sort = {prop,order}
        /*{ prop: "field", order: "ascending / descending}*/
        this.getList()
      },
      //批量提交
      multipleSelectSubmit(){
        console.log(this.multipleSelection )
      },
      //勾选变动
      handleSelectionChange(val) {
        let checkedCount = val.length;
        console.log(checkedCount,)
        this.multipleSelection = val;
        this.checkboxAll = checkedCount === this.defaultFormThead.length;
      },
      //全选可选列
      handleCheckAllChange(val) {
        this.checkboxVal = val ? this.defaultFormThead : this.colexp;
      },

      openDHPC(row){
        console.log('ddd');
        this.dialogDHPC = true
      },

      handleEdit(row) {
        console.log(123)
        this.$emit('updateRow', row)
      },
      handleDelete(row) {

        this.$msgbox({
          message: '确定要删除该备件吗? 该操作不可逆,请谨慎操作!!!',
          showCancelButton: true,
          confirmButtonText: '确定',
          cancelButtonText: '取消'
        }).then(action => {
          updateOne('sparepartscode/parts/freeze', {id: row._id}).then(res => {
            if (res.code === 0) {
              SUCS('删除成功!')
              this.getList();
            } else {
              ERRS(res.message)
            }
          })
        });
      },


    }
  }
</script>

<style lang="scss">

</style>
